<template>
  <div class="c-pv28 c-pl24 c-bg-white" :class="borderTop ? 'c-bd-t12-f5' : 'c-bd-b12-f5'" v-if="collocationList.length > 0">
    <div class="c-flex-row c-justify-sb c-aligni-center c-pr24">
      <div class="c-fs24 c-fc-xblack c-fw600">搭配购</div>
      <div @click="goMore" class="c-fc-gray c-fs20">查看更多<span class="iconfont c-fs14 c-pl4">&#xe60e;</span></div>
    </div>
    <div class="c-contexty-hidden c-contextX-scroll c-ws-n c-mt30">
      <div @click="goDetail(item.pcId)" v-for="(item, index) in collocationList" :key="index" class="c-inlineblack c-vcAlign-top c-mr20">
        <div class="c-flex-row c-justify-sb c-ww500">
          <div class="c-ww210 c-maxh140">
            <div class="c-br16 c-text-hidden c-p c-maxh140">
              <img class="c-w100 c-br16 c-text-hidden" :src="$addXossFilter(item.cover ,require('../../assets/defult270.png'))" alt="">
              <div class="c-fc-white c-fs18 c-translucent-balck50 c-br-tl16 c-pa c-p-b0 c-p-r0 c-ph12 c-hh28 c-lh28">{{item.comboType === 1 ? '自选套餐' : '固定套餐'}}</div>
            </div>
          </div>
          <div class="c-flex-column c-justify-sb c-w0 c-flex-grow1 c-ml20 c-h">
            <div class="c-fs24 c-fc-xblack c-fw600 c-text-ellipsis1">{{item.name}}</div>
            <div class="c-fs20 c-fc-sblack c-mt10">
              <cj-clocker :time="timeFn(index)" @on-finish="finishFn(index)">
                <template v-slot="{ timeInfo }">
                  距{{item.pcStatus == 2 ? '结束' : '开始'}}：<span class="c-fc-xblack c-fw-b">{{timeInfo.D}}</span>天
                  <span class="c-ml4">
                    <span class="c-fs20 c-fc-xblack c-ww32 c-hh24 c-br4 c-inlineblack time-bg c-textAlign-c c-fw-b">{{timeInfo.H}}</span>
                    <span class="c-ph2">:</span>
                    <span class="c-fs20 c-fc-xblack c-ww32 c-hh24 c-br4 c-inlineblack time-bg c-textAlign-c c-fw-b">{{timeInfo.M}}</span>
                    <span class="c-ph2">:</span>
                    <span class="c-fs20 c-fc-xblack c-ww32 c-hh24 c-br4 c-inlineblack time-bg c-textAlign-c c-fw-b">{{timeInfo.S}}</span>
                  </span>
                </template>
              </cj-clocker>
            </div>
            <div class="c-fs26 c-fc-xmlred c-fw600 c-mt10"><span class="c-fs22">{{'￥' | iosPriceFilter}}</span>{{(item.comboType == 2 && item.specType == 2 ? item.minPrice : item.price) | moneyStr}}<span v-if="item.comboType == 2 && item.specType == 2" class="c-fs18">起</span></div>
            <div class="c-flex-row c-mt10" v-if="Number(item.collocationPrice - item.price) > 0">
              <div class="c-inlineblack c-vcAlign-middle c-text-ellipsis1  c-fc-xmlred c-p c-text-hidden c-br4 bd1-xmlred c-pv2 c-lh c-pl32 c-boxsizing-c c-pr5">
                <div class="iconfont c-fs28 c-pa p-l-2 c-p-t0">&#xe758;</div>
                <div class="c-fs18 c-text-ellipsis1">{{item.comboType == 1 ? '最多可省' : item.specType == 2 ? '最多可省' : '立省'}}<span>{{'￥' | iosPriceFilter}}</span>{{Number(item.collocationPrice - item.price).toFixed(2) | moneyStr}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js"
export default {
  name: 'CollocationBuyCom',
  components: {
  },
  props: {
    relateCollocationArr: {
      type: Array,
      default: () => []
    },
    borderTop: {
      type: Boolean,
      default: false
    },
    prodInfo: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      collocationList: [],
    }
  },
  watch: {
    relateCollocationArr(val) {
      this.collocationList = val;
    },
  },
  methods: {
    goMore() {
      this.$routerGo(this, "push", {
        path: "/homePage/collocationBuy/collocationBuyList",
        query: {
          prodId: this.prodInfo.prodId,
          prodType: this.prodInfo.prodType,
        }
      });
    },
    goDetail(mId) {
      this.$routerGo(this, "push", {
        path: "/homePage/collocationBuy/collocationDetail",
        query: {mId: mId}
      });
    },
    timeFn: function (index) {
      let stime = this.collocationList[index].startTime ? utilJs.getTimeByDate(this.collocationList[index].startTime) : 0;
      let etime = this.collocationList[index].endTime ? utilJs.getTimeByDate(this.collocationList[index].endTime) : 0;
      let nowTime = (new Date()).getTime();
      //.status 1未开始,2进行中,-1已结束
      let time = '';
      if (stime > nowTime) {
        this.collocationList[index].pcStatus = 1;
        time = stime;
      } else if (etime > nowTime) {
        this.collocationList[index].pcStatus = 2;
        time = etime;
      } else {
        this.collocationList[index].pcStatus = 3;
      }
      return time;
    },
    finishFn: function (index) {
      if (this.collocationList[index].pcStatus == 1) {
        this.collocationList[index].pcStatus = 2;
      } else {
        this.collocationList[index].pcStatus = 3;
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.time-bg {
  background: rgba(51, 51, 51, 0.1);
  line-height: 0.65rem;
}
.bd1-xmlred {
  border: 1px solid #FF300C;
}
.p-l-2 {
  left: -0.05rem;
}
</style>